<template>
  <!-- 巡检管理 -- 巡检内容管理 -- 添加/编辑-->
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="submitForm('myForm')" class="submit">提交</button>
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="main-content form-edit">
        <div class="page-form">
          <el-form class="my-form my-form-600" ref="myForm" :model="myForm" :rules="rules" label-width="100px" size="medium">
            <el-form-item label="项目名称:" prop="name" required>
              <el-input v-model="myForm.name"></el-input>
            </el-form-item>
            <el-form-item label="项目要求:" prop="request" required>
              <el-input type="textarea" class="my-area" placeholder="填写项目要求" v-model="myForm.request"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status" required>
              <el-select v-model="myForm.status" placeholder="--请选择状态--" clearable>
                <el-option v-for="(item,key,index) in statusArr" :key="item.id" :label=item.label :value=item.value></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
</style>
<script>
  import com from "../../../../js/common"
  import HeadTop from "../../../../components/head-top/head-top"
  import {getExamineItemType, examineItemAdd, examineItemEdit} from '@/api/getData'

  export default {
    components: {
      HeadTop
    },
    data() {
      return {
        title: '添加巡检内容',
        type: 'add',
        onlyRead: false,
        myForm: {
          status: 1,
          name: '',
          request: '',
          id: '',
        },
        statusArr: [
          {
            label: '禁用',
            value: 0
          },
          {
            label: '正常',
            value: 1
          }
        ],
        examineItemId: '',
        rules: {
          name: [
            {required: true, message: '请输入项目名称'}
          ],
          request: [
            {required: true, message: '请输入项目要求'}
          ],
          status: [
            {required: true, message: '请选择项目状态'}
          ]
        }
      };
    },
    // 判断操作为添加/编辑
    mounted() {
      // 获取巡查类型数据
      if (this.$route.query.type == 'edit') {
        const fromId = this.$route.query.id;
        this.examineItemId = fromId;
        this.myForm.id = fromId;
        this.getExamineItemData(fromId);
        this.title = '编辑巡检内容';
        this.type = 'edit';
      }
    },
    methods: {
      // 获取页面所需数据
      getExamineItemData: function (id) {
        getExamineItemType({id: id}).then((data) => {
          this.myForm = data.data.data;
        }).catch((err) => {
          this.$message.error({
            message: '查询失败',
            duration: 1500
          })
        })
      },

      // 创建/修改表单数据的校验
      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.upExamineItem();
          } else {
            return false;
          }
        });
      },

      // 新建/修改巡检记录提交
      upExamineItem() {
        let reqUrl = '';
        let reqData = this.myForm
        if (this.type == 'add') {
          delete reqData['id'];
          examineItemAdd(reqData).then((res) => {
            com.mask()
            this.axioThen(this);
          }).catch((err) => {
            this.$message.warning('操作失败');
          })
        } else {
          examineItemEdit(reqData).then((res) => {
            com.mask()
            this.axioThen(this);
          }).catch((err) => {
            this.$message.warning('操作失败');
          })
        }
      },

      // 編輯/添加巡检记录提交請求成功後的操作
      axioThen(self) {
        self.$message.success({
          message: '操作成功',
          duration: 1500,
          onClose: () => {
            com.unmask()
            self.$router.push('/manage/examineMgr/examineContentMgr')
          }
        });
      },

      // 返回上一级
      back() {
        this.$router.go(-1);
      },
    }
  };
</script>
